<template>
    <div id="map" class="map" ref="rootmap1">
        
        
    </div>
</template>

<script>
import { Map, View } from "ol";
import OSM from "ol/source/OSM";
import {fromLonLat} from 'ol/proj';
import TileLayer from 'ol/layer/Tile';
import TileWMS from 'ol/source/TileWMS';

export default{
    
    data(){
        return{
            map:null,
            homicides:{},
            block: {}
        };
    },
    mounted(){
       const world = new TileLayer({
                source: new OSM(),
            });
        const geo = new TileLayer({
                source: new TileWMS({
                    url:'http://localhost:8081/geoserver/nyc/wms',
                    params:{
                        "LAYERS": 'nyc:nyc_buildings'
                    },
                    serverType: 'geoserver'
                })
            });
        this.block = new TileLayer({
            source: new TileWMS({
                url: 'http://localhost:8081/geoserver/nyc/wms',
                params:{
                    "LAYERS": '	nyc:blocks'
                },
                serverType: 'geoserver'
            })
        })
        this.homicides = new TileLayer({
            source: new TileWMS({
                url: 'http://localhost:8081/geoserver/nyc/wms',
                params:{
                    "LAYERS": 'nyc:homicides'
                },
                serverType: 'geoserver'
            })
        })
        const subway_stations = new TileLayer({
            source: new TileWMS({
                url: 'http://localhost:8081/geoserver/nyc/wms',
                params:{
                    "LAYERS": 'nyc:subway_stations'
                },
                serverType: 'geoserver'
            })
        })
        const streets = new TileLayer({
            source: new TileWMS({
                url: 'http://localhost:8081/geoserver/nyc/wms',
                params:{
                    "LAYERS": 'nyc:streets'
                },
                serverType: 'geoserver'
            })
        })
        const layers = [ world,this.block,geo,this.homicides,streets,subway_stations]

         var map = new Map({
            target: 'map',
            layers: layers,
            view: new View({
            center: fromLonLat([0, 0]),
            zoom: 2,
            })
        });
        this.map = map;
    }
}
</script>
  <style>
    .map {
      height: 800px;
      width: 100%;
    }
  </style>
